import React, { useEffect, useState } from "react";
import { Badge, Dropdown, Layout, Menu, Modal } from "antd";
import Logo from "../../img/GWmodelLab.png";
import "./index.css";
import { withRouter } from "react-router-dom";
import { getUserRole } from "../../utils/auth";
import Avatar from "antd/lib/avatar/avatar";

const { Header } = Layout;
//切换用户角色与头部跳转导航
const userRoleTell = (roleCode) => {
  if (roleCode === 0) {
    return [
      { path: "/admin/home", name: "首页" },
      { path: "/admin/manager/useredit", name: "用户管理" },
      { path: "/admin/manager/fileinfo", name: "文件管理" },
      { path: "/admin/manager/spider", name: "爬虫管理" },
    ];
  } else if (roleCode === 1) {
    return [
      { path: "/admin/home", name: "首页" },
      { path: "/admin/user/filelist", name: "下载文件" },
      // { path: "/admin/user/shop", name: "购物车" },
    ];
  } else {
    console.log("用户角色错误");
    return false;
  }
};

function Index(props) {
  //state
  const [userRoleValue, setUserRoleValue] = useState(0); //用户角色
  const [isModalVisible, setIsModalVisible] = useState(false); //
  //头部导航跳转
  const goToPage = (value) => {
    props.history.push(value.key);
  };
  //安全退出弹窗
  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleOk = () => {
    // removeToken();
    localStorage.clear();
    setIsModalVisible(false);
    goToPage("/login");
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  //用户导航
  const popMenu = (
    <Menu>
      <Menu.Item key="/admin/home/notice" onClick={goToPage}>
        最新通知
      </Menu.Item>
      <Menu.Item key="/admin/personalinfo" onClick={goToPage}>
        个人设置
      </Menu.Item>
      <Menu.Item key="logout" onClick={showModal}>
        退出
      </Menu.Item>
    </Menu>
  );

  //生命周期函数
  useEffect(() => {
    setUserRoleValue(parseInt(getUserRole())); //指定用户角色
  }, []);

  return (
    <Layout>
      <Header className="header">
        <div className="logo">
          <img src={Logo} alt="logo" />
        </div>
        <Menu
          className="itembar"
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["1"]}
        >
          {userRoleTell(userRoleValue).map((item, index) => {
            return (
              <Menu.Item key={item.path} onClick={goToPage}>
                {item.name}
              </Menu.Item>
            );
          })}
        </Menu>
        <div className="userHeaderImg">
          <Dropdown overlay={popMenu} className="dropdown">
            <Badge dot={false}>
              <Avatar
                shape="circle"
                size={40}
                style={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
              >
                {userRoleValue ? "U" : "A"}
              </Avatar>
            </Badge>
          </Dropdown>
        </div>
      </Header>
      {props.children}
      <Modal
        title="确定退出？"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        确定退出本系统？
      </Modal>
    </Layout>
  );
}

export default withRouter(Index);
